<template>
  <a-layout style="min-height: 100vh">
    <a-layout-sider v-model:collapsed="collapsed" :trigger="null" collapsible>
      <div class="logo" />
      <NavMenu :menulist="routeStore.menuList" />
    </a-layout-sider>
    <a-layout>
      <a-layout-header style="padding: 0; background: #fff">
        <menu-unfold-outlined
          v-if="collapsed"
          class="trigger"
          @click="() => (collapsed = !collapsed)"
        />
        <menu-fold-outlined v-else class="trigger" @click="() => (collapsed = !collapsed)" />
      </a-layout-header>
      <a-layout-content style="margin: 0 16px">
        <a-breadcrumb style="margin: 16px 0">
          <a-breadcrumb-item>User</a-breadcrumb-item>
          <a-breadcrumb-item>Bill</a-breadcrumb-item>
        </a-breadcrumb>
        <div class="layout-content">
          <router-view />
        </div>
      </a-layout-content>
      <a-layout-footer style="text-align: center">
        <Copyright />
      </a-layout-footer>
    </a-layout>
  </a-layout>
</template>

<script lang="ts" setup>
import Copyright from './components/Copyright/index.vue'
import NavMenu from './components/Menu/index.vue'
import { useRouteStore } from '@/store/modules/routes'

const routeStore = useRouteStore()

const collapsed = ref<boolean>(false)
</script>

<style scoped lang="less">
.logo {
  margin: 16px;
  height: 32px;
  background: rgb(255 255 255 / 30%);
}

.layout-content {
  position: relative;
  padding: 24px;
  min-height: 360px;
  background: #fff;
  border-radius: 8px;
}
</style>
